<!--用户变动以及新增页面-->
<template>
  <div>

    <el-row :gutter="1" class="el-row">
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">累计注册用户数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ userTotal }}<span style="font-size:20px">人</span></div>
        </div>
      </el-col>
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">活跃用户数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ activeUserTotal }}<span style="font-size:20px">人</span>
          </div>
        </div>

      </el-col>
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}新增注册用户数</div>
          <br>
          <div style="font-size:40px;text-align:center">{{ newOrderUserCount }}<span style="font-size:20px">人</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}新增消费用户数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ newPaymentUserCount }}<span style="font-size:20px">人</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}用户流失数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ userChurn }}<span style="font-size:20px">人</span></div>
        </div>
      </el-col>
      <el-col :span="4" class="el-card">
        <div class="grid-content bg-purple">
          <div style="font-size:18px;color:grey ">{{ this.$parent.dateRange }}用户回流数</div>
          <br>
          <div style="font-size:40px;text-align:center"> {{ userBack }}<span style="font-size:20px">人</span></div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>


<script>
import api from '@/api/statistics/user/user'

export default {
  data() {
    return {
      userTotal: 0,
      activeUserTotal: 0,
      newOrderUserCount: 0,
      newPaymentUserCount: 0,
      userChurn: 0,
      userBack: 0,
      searchObj: {
        recentDays: this.$parent.recentDays,
        dt: this.$parent.curDate
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.searchObj.recentDays = this.$parent.recentDays
      this.searchObj.dt = this.$parent.curDate
      api.getUserTotal(this.searchObj).then(response => {
        this.userTotal = response.data.userTotal
        this.activeUserTotal = response.data.activeUserTotal
        this.newOrderUserCount = response.data.newOrderUserCount
        this.newPaymentUserCount = response.data.newPaymentUserCount
        this.userChurn = response.data.userChurn
        this.userBack = response.data.userBack
      }).catch(response => {
        console.log('失败' + response)
      })
    }


  }
}
</script>

